<template>
	<view class="comment">
		<view class="header">
			<view class="back" @click="comeback">〈</view>
			<view class="con">{{longComment.length + shortComment.length}}条评论</view>
		</view>
		<view class="section long" v-if="longComment.length">
			<view class="title">{{longComment.length}}条长评</view>
			<CommentItem v-for="item in longComment" :comment="item" />
		</view>
		<view class="section short" v-if="shortComment.length">
			<view class="title">{{shortComment.length}}条短评</view>
			<CommentItem v-for="item in shortComment" :comment="item" />
		</view>

		<view class="no-more">已显示全部评论</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longComment: [],
				shortComment: []
			}
		},
		onLoad(options) {
			Promise.all([this.getLongComment(options.id), this.getshortCom(options.id)])
			// .then(res => {
			// 	uni.setNavigationBarTitle({
			// 		title: `${this.longComment.length + this.shortComment.length}条评论`
			// 	})
			// })
			// getLongComment(this.$route.query.id)
			console.log(options)
		},
		methods: {
			comeback: function() {
				uni.navigateBack({})
			},
			getLongComment: function(id) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://apis.netstart.cn/zhihudaily/story/' + id + '/long-comments',
						success: (res) => {
							this.longComment = [...res.data.comments]
							resolve(res)
						}
					})
				})

			},
			getshortCom: function(id) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://apis.netstart.cn/zhihudaily/story/' + id + '/short-comments',
						success: (res) => {
							this.shortComment = [...res.data.comments]
							resolve(res)
						}
					})
				})

			}
		}
	}
</script>

<style lang="less">
	.comment {
		width: 100%;
		.header {
			position: fixed;
			top: 0rpx;
			width: 100%;
			height: 65rpx;
			display: flex;
			justify-content: space-between;
			font-size: 35rpx;
			padding-top: 20rpx;
			background-color: #FFFFFF;
			z-index: 1000;
			padding-top: 105rpx;
			.back {
				font-size: 40rpx;
				font-family: "宋体";
				font-weight: 600;
				padding-left: 20rpx;
				
			}

			.con {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.no-more {
			text-align: center;
			font-size: 28rpx;
			margin-top: 10rpx;
			padding-bottom: 20rpx;
		}

		.section {
			padding: 30rpx;
			font-weight: bold;
			font-size: 28rpx;
			margin-top: 100rpx;
		}
	}
</style>
